<template>
  <div class="app-container">
    <h2>Notification</h2>
    <hr/>
    
    <el-table
      :data="notifications"
      @selection-change="handleSelectionChange"
      fit>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="id" prop="id" width="200"></el-table-column>
      <el-table-column label="content" prop="content"></el-table-column>
      <el-table-column label="time" width="400">
        <template slot-scope="{row}">
          {{ new Date(row.createTime).toLocaleString() }}
        </template>
      </el-table-column>
    </el-table>
    <el-button
      type="primary"
      class="float-right"
      @click="handleConfirm"
    >OK</el-button>
  </div>
</template>

<script>
import { getAllNotification, getAllUnconfimed, confirm } from '@/api/notification'

export default {
  name: 'Notification',

  data() {
    return {
      notifications: [],
      selection: [],
    }
  },

  created() {
    getAllNotification().then(response => {
      this.notifications = response.data
    })
  },

  methods: {
    handleConfirm() {
      if (this.selection.length != 0) {
        const data = {
          id: this.selection.reduce((prev_list, cur) => {
            prev_list.push(cur.id)
            return prev_list
          }, [])
        }
        
      } else {
        this.$message({
          showClose: true,
          message: "please select at least one item"
        })
      }
    },
    handleSelectionChange(val) {
      console.log(this.selection)
      this.selection = val
    }
  }
}
</script>

<style lang="scss">
.float-right {
  float: right;
  margin-top: 10px;
  margin-right: 60px;
}
</style>